<template>
  <div>
    <div>
      <list-table-search-header
        :shop-id="shopId"
        @search="handleSearch"
        @reset="fetchData(true)"
      />
    </div>
    <div class="oprButtons item">
      <!-- <el-button icon="el-icon-download" round size="small" @click="downExcel">导出</el-button> -->
      <el-button icon="el-icon-delete" size="small" @click="handleSelectDel">&nbsp;删除</el-button>
    </div>
    <div style="width: 100%" class="item hasCheckbox">
      <table-panel
        ref="OrderMessageTableRef"
        :table-data="tableData"
        :table-head="column"
        :checkbox="true"
        :border="true"
        @selection-change="handleSelectChange"
      >
        <template #status="{ scope }">
          <el-switch
            v-model="scope.status"
            :active-value="LIST_STATE.ON"
            :inactive-value="LIST_STATE.OFF"
            @change="handleChangeAppointmentCategory(scope)"
          />
        </template>
        <template #price="{ scope }">
          <span slot="price">
            {{ scope.price / 100 }}
          </span>
        </template>

        <template #opr="{ scope }">
          <el-button type="text" @click="handleEditResource(scope)">编辑</el-button>
          <el-button
            type="text"
            @click="handleCopyResource(scope)"
          >复制</el-button>
          <el-button
            type="text"
            @click="handleDelResource(scope)"
          >删除</el-button>
        </template>

      </table-panel>
    </div>
    <div class="footer item">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
        :current-page="params.pageNum"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import tablePanel from '../../../components/TablePanel'
import listTableSearchHeader from '@/views/wxaReservationModule/views/resourceManage/components/listTableSearchHeader'
import { listColumn, LIST_STATE } from '@/views/wxaReservationModule/views/resourceManage/config'
import {
  addAppointmentCategoryDetail,
  delAppointmentCategoryDetail,
  getAppointmentCategoryDetail,
  getAppointmentCategoryQryLis,
  updateAppointmentCategory,
  downMallResourcesList
} from '@/api/reservation'

export default {
  name: 'ListTable',
  components: { tablePanel, listTableSearchHeader },
  props: {
    shopId: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      column: listColumn,
      LIST_STATE,
      tableData: [],
      tempSelectList: [],
      params: {
        levelId: '',
        name: '',
        pageNum: 1,
        pageSize: 10,
        shopId: '',
        status: ''
      },
      total: 0
    }
  },
  watch: {
    shopId() {
      console.log('变化', this.shopId)
      this.fetchData(true)
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    handleSelectChange(val) {
      this.tempSelectList = val
    },
    handleSearch(val) {
      this.params = {
        ...this.params,
        ...val,
        pageNum: 1,
        pageSize: 10
      }
      this.fetchData()
    },
    handlePageChange(e) {
      this.params.pageNum = e
      this.fetchData()
    },
    async handleChangeAppointmentCategory({ id, status }) {
      const { code } = await updateAppointmentCategory({ id, status })
      if (code === 0) {
        this.$message.success('成功!')
        await this.fetchData()
      }
    },
    async fetchData(isClear = false) {
      if (isClear) {
        this.params = {
          levelId: '',
          name: '',
          pageNum: 1,
          pageSize: 10,
          shopId: '',
          status: ''
        }
      }
      this.params.shopId = this.shopId
      const { code, data } = await getAppointmentCategoryQryLis(this.params)
      if (code === 0) {
        const { total, list } = data
        this.total = total
        this.tableData = list
      }
    },
    async handleCopyResource({ id }) {
      const { code, data } = await getAppointmentCategoryDetail({ id })
      if (code === 0) {
        const { categoryId, imgUrl, labelList, levelId, name, shopId, status } =
          data
        const { code } = await addAppointmentCategoryDetail({
          categoryId,
          imgUrl,
          labelList,
          levelId,
          name,
          shopId,
          status
        })
        if (code === 0) {
          this.$message.success('复制成功!')
          await this.fetchData(true)
        }
      }
    },
    async handleDelResource({ id }) {
      const { code } = await delAppointmentCategoryDetail({ id })
      if (code === 0) {
        this.$message.success('删除成功!')
        await this.fetchData(true)
      }
    },
    handleSelectDel() {
      let len = this.tempSelectList.length
      if (len === 0) {
        this.$message.warning('请选择后再删除!')
        return
      }
      this.tempSelectList.map((v) => {
        delAppointmentCategoryDetail({ id: v.id }).then((res) => {
          const { code } = res
          if (code === 0) len--
          if (len === 0) {
            this.$message.success('批量删除成功!')
            this.fetchData(true)
            this.tempSelectList = []
          }
        })
      })
    },
    handleEditResource(scope) {
      this.$emit('edit', { detail: scope })
    },
    // 导出
    downExcel() {
      const data = Object.assign({}, this.params)
      delete data.pageNum
      delete data.pageSize
      downMallResourcesList(data).then((res) => {
        if (res.code === 0) {
          this.$alert('数据导出中，请稍后到数据下载中心进行下载', '提示', {
            confirmButtonText: '确定',
            center: true,
            type: 'success'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.item {
  margin: 10px 0;
}
</style>
